<template>
  <el-page-header @back="goBack" :icon="ArrowLeft">
    <template #content>
      <span class="text-large font-600 mr-3"> 药品详情 </span>
    </template>
  </el-page-header>
  <template v-if="drug.name == undefined">
    <el-empty description="没有符合的物品" />
  </template>
  <!-- 商品信息 -->
  <div class="flex justify-start" v-if="drug.name != undefined" style="width: 100%; height: 30%">
    <div class="w-1/2">
      <div>
        <el-image style="object-fit: fill; width: 60%; height: 60%" class="ml-10 mt-36"
          :src="'api/uploads/drug/' + drug.url" />
        <div class="purchase">
          <el-button type="warning" style="width: 80%;" class=" bg-yellow-300" plain @click="dialogVisibleTrue">下单</el-button>
        </div>
      </div>
    </div>
    <div class="spec">
      <p class="g-name">{{ drug.name }}</p>
      <p class="g-desc">{{ drug.drugFunction }}</p>
      <p class="g-price">
        <span>{{ drug.price }}</span>
      </p>
      <div class="g-service">
        <dl>
          <dt>适应症</dt>
          <dd>&nbsp;{{ drug.indication }}</dd>
        </dl>
        <dl>
          <dt>成分</dt>
          <dd>{{ drug.composition }}</dd>
        </dl>
        <dl>
          <dt>用法</dt>
          <dd>
            {{ drug.illustrate }}
          </dd>
        </dl>
        <dl>
          <dt>字号</dt>
          <dd>
            {{ drug.approvalNo }}
          </dd>
        </dl>
        <dl>
          <dt>企业</dt>
          <dd>
            {{ drug.pc }}
          </dd>
        </dl>
        <dl>
          <dt>标签</dt>
          <dd>
            {{ drug.label }}
          </dd>
        </dl>
      </div>
    </div>
  </div>

  <!-- 编辑订单弹窗 -->
  <el-dialog title="订单信息" v-model="dialogVisible" width="35%">
    <template #footer>
      <el-form label-width="100px" ref="formData" :rules="rules" :model="order">
        <el-form-item label="药品名" prop="name" clearable>
          <el-input v-model="order.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="单价" prop="price" clearable>
          <el-input v-model="drug.price" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="总金额" prop="receivable" clearable>
          <el-input v-model="order.receivable" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="医保卡号" prop="number" clearable>
          <el-input v-model="order.number"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="total" clearable>
          <el-input-number v-model="order.total" @change="handleChange" :min="1" :max="100"
            label="描述文字"></el-input-number>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button plain @click="cancel">取 消</el-button>
        <el-button type="warning" plain @click="confirm">下单</el-button>
        <el-button type="warning" plain @click="addcart">加入购物车</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { orderAdd } from "../../../api/modules/druginfo";
import { addToCart } from "../../../api/modules/shopingcart";
import { checkBindingNum } from "../../../api/modules";
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElNotification } from "element-plus";
const route = useRoute();
const router = useRouter();
const store = useStore();
const drug = reactive(store.getters.currentDrugInfo);
const dialogVisible = ref(false);
const order = reactive({
  number: "",
  name: "",
  total: 1,
  receivable: "",
});
const cartms = reactive({
  did:"",
  uid: "",
  name: "",
  number: "",
  price: "",
  total:"",
});
const bindingData = reactive({
  id: '',
  securityNum: ''
})
const addcart =async()=>{
  bindingData.securityNum = order.number
  if (userInfo.value.id == '') {
    alert("您当前尚未登录，请先登录再提交订单")
    router.push("/login")
    return;
  }
  bindingData.id = userInfo.value.id
  let res = await checkBindingNum(bindingData)
  if (res.data.data == 1) {
    ElNotification.success("订单提交成功")
    cartms.name=order.name
    cartms.uid=order.number
    cartms.number=order.total
    cartms.did=drug.id
    cartms.price=drug.price
    cartms.total=order.receivable
    console.log(cartms);
    addToCart(cartms);
    //orderAdd(order);
  } else if (res.data.data == 0) {
    ElNotification.error("当前卡号未进行绑定或卡号不正确")
  }
  dialogVisible.value = false;
}
const goBack = () => {
  history.go(-1);
};
const dialogVisibleTrue = () => {
  order.name = drug.name;
  order.receivable = drug.price * order.total;
  dialogVisible.value = true;
};
const handleChange = () => {
  order.receivable = drug.price * order.total;
};
const cancel = () => {
  dialogVisible.value = false;
};
const confirm = async () => {
  bindingData.securityNum = order.number
  if (userInfo.value.id == '') {
    alert("您当前尚未登录，请先登录再提交订单")
    router.push("/login")
    return;
  }
  bindingData.id = userInfo.value.id
  let res = await checkBindingNum(bindingData)
  if (res.data.data == 1) {
    ElNotification.success("订单提交成功")
    orderAdd(order);
  } else if (res.data.data == 0) {
    ElNotification.error("当前卡号未进行绑定或卡号不正确")
  }
  dialogVisible.value = false;
};
let userInfo = ref({
  id:''
})
onMounted(() => {
  if(store.getters.UserInfo.UserInfo != undefined){
    userInfo.value = JSON.parse(store.getters.UserInfo.UserInfo)
  }
})
</script>

<style lang="less" scoped>
@xtxColor: red;

.g-name {
  font-size: 22px;
}

.g-desc {
  color: #999;
  margin-top: 10px;
}

.g-price {
  margin-top: 10px;

  span {
    &::before {
      content: "¥";
      font-size: 14px;
    }

    &:first-child {
      color: gray;
      margin-right: 10px;
      font-size: 22px;
    }
  }
}

.g-service {
  background: #f5f5f5;
  width: 500px;
  padding: 20px 10px 0 10px;
  margin-top: 10px;

  dl {
    padding-bottom: 20px;
    display: flex;
    align-items: center;

    dt {
      width: 50px;
      color: #999;
    }

    dd {
      color: #666;

      &:last-child {
        span {
          margin-right: 10px;

          &::before {
            content: "•";
            color: @xtxColor;
            margin-right: 2px;
          }
        }

        a {
          color: @xtxColor;
        }
      }
    }
  }
}

.goods-sales {
  display: flex;
  width: 400px;
  align-items: center;
  text-align: center;
  height: 140px;

  li {
    flex: 1;
    position: relative;

    ~li::after {
      position: absolute;
      top: 10px;
      left: 0;
      height: 60px;
      border-left: 1px solid #e4e4e4;
      content: "";
    }

    p {
      &:first-child {
        color: #999;
      }

      &:nth-child(2) {
        color: gray;
        margin-top: 10px;
      }

      &:last-child {
        color: #666;
        margin-top: 10px;

        i {
          color: @xtxColor;
          font-size: 14px;
          margin-right: 2px;
        }

        &:hover {
          color: @xtxColor;
          cursor: pointer;
        }
      }
    }
  }
}

.purchase {
  width: 250px;
  margin: 10px auto;
}
</style>
